import dash
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        f'区块{i}',
                        style={
                            'backgroundColor': 'rgba(64, 173, 255, 1)',
                            'color': 'white',
                            'height': '100px',
                            'display': 'flex',
                            'justifyContent': 'center',
                            'alignItems': 'center'
                        }
                    ),
                    span=6,
                    id={
                        'type': 'area-demo',
                        'index': i
                    }
                )
                for i in range(6)
            ] + [
                fac.AntdCol(
                    html.Div(
                        fac.AntdButton(
                            fac.AntdIcon(
                                icon='antd-plus-circle'
                            ),
                            shape='circle',
                            type='text',
                            id={
                                'type': 'area-demo',
                                'index': 'add-button'
                            }
                        ),
                        style={
                            'color': 'white',
                            'height': '100px',
                            'display': 'flex',
                            'justifyContent': 'center',
                            'alignItems': 'center',
                            'border': '1px dashed rgb(220, 220, 220)'
                        }
                    ),
                    span=6
                )
            ],
            id='area-container',
            gutter=[10, 10]
        ),

        # 注入持久化存储器
        dcc.Store(id='persistence-store', storage_type='session')
    ],
    style={
        'padding': '100px'
    }
)


@app.callback(
    Output('area-container', 'children'),
    Input('persistence-store', 'data')
)
def store_to_layout(data):
    if data:
        return data

    return dash.no_update


@app.callback(
    Output('persistence-store', 'data'),
    Input(
        {
            'type': 'area-demo',
            'index': 'add-button'
        },
        'nClicks'
    ),
    State('area-container', 'children')
)
def add_area(nClicks, children):
    if nClicks:
        return [
            *children[:-1],
            fac.AntdCol(
                html.Div(
                    f'区块{children.__len__() - 1}',
                    style={
                        'backgroundColor': 'rgba(64, 173, 255, 1)',
                        'color': 'white',
                        'height': '100px',
                        'display': 'flex',
                        'justifyContent': 'center',
                        'alignItems': 'center'
                    }
                ),
                span=6,
                id={
                    'type': 'area-demo',
                    'index': children.__len__() - 1
                }
            ),
            children[-1]
        ]

    return dash.no_update


if __name__ == '__main__':
    app.run_server(debug=True)
